<template>
	<view class="container">
		<view class="profile-form">
			<u-form :model="profileForm" ref="profileForm" :rules="rules" label-width="80">
				<!-- 昵称 -->
				<u-form-item label="头像" prop="avatar">
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" :multiple="false"
						:maxCount="1" height="100rpx" width="100rpx"></u-upload>
				</u-form-item>

				<!-- 昵称 -->
				<u-form-item label="昵称" prop="nickname">
					<u-input v-model="profileForm.nickname" placeholder="请输入昵称" />
				</u-form-item>

				<!-- 邮箱 -->
				<u-form-item label="邮箱" prop="email">
					<u-input v-model="profileForm.email" placeholder="请输入邮箱" />
				</u-form-item>

				<!-- 个人简介 -->
				<u-form-item label="个人简介">
					<u-input type="textarea" v-model="profileForm.signature" placeholder="介绍一下自己吧..." :height="120" />
				</u-form-item>

				<!-- 性别 -->
				<u-form-item label="性别">
					<u-radio-group v-model="profileForm.sex">
						<u-radio :name="1" custom-style="margin-right: 40rpx;">男</u-radio>
						<u-radio :name="2" custom-style="margin-right: 40rpx;">女</u-radio>
						<u-radio :name="0">保密</u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		getUserProfile,
		updateUserProfile
	} from "@/api/user"
	import {
		baseUrl
	} from '@/utils/config';
	import {
		createLogger
	} from "vuex"

	export default {
		data() {
			return {
				fileList: [],

				profileForm: {
					nickName: "",
					phonenumber: "",
					email: "",
					sex: ""
				},
				sexs: [{
					text: '男',
					value: "0"
				}, {
					text: '女',
					value: "1"
				}],
				rules: {
					nickName: {
						rules: [{
							required: true,
							errorMessage: '用户昵称不能为空'
						}]
					},
					phonenumber: {
						rules: [{
							required: true,
							errorMessage: '手机号码不能为空'
						}, {
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							errorMessage: '请输入正确的手机号码'
						}]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '邮箱地址不能为空'
						}, {
							format: 'email',
							errorMessage: '请输入正确的邮箱地址'
						}]
					}
				}
			}
		},
		onLoad() {
			this.getUser()
		},
		onReady() {
			this.$refs.profileForm.setRules(this.rules)
		},
		methods: {
			getUser() {
				getUserProfile().then(response => {
					this.profileForm = response.data.sysUser
					this.fileList = [{
						url: this.profileForm.avatar
					}]
				})
			},
			// 删除图片
			deletePic(event) {
				this.fileList = []
			},
			// 新增图片
			afterRead(event) {
				uni.$u.http.upload(baseUrl + '/file/upload', {
					filePath: event.file.thumb,
					name: 'file',
					header: {
						"Authorization": uni.getStorageSync("token")
					},
				}).then(({
					data
				}) => {
					console.log(data);
					this.profileForm.avatar = data.data
					this.fileList = [{
						url: this.profileForm.avatar
					}]
				})
			},
			submit(ref) {
				this.$refs.profileForm.validate().then(res => {
					updateUserProfile(this.profileForm).then(response => {
						if (response.data === 200) {
							uni.showToast({
								title: '修改成功',
								icon: 'success'
							});
							uni.setStorageSync("userInfo", this.profileForm);
						} else {
							uni.showToast({
								title: response.message,
								icon: 'error'
							});
						}

					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f5f6fa;
		padding: 20rpx;
		position: relative;
	}

	.profile-form {
		background: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.avatar-upload {
		position: relative;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #f5f5f5;
	}

	.avatar-overlay {
		position: absolute;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 50%;
		padding: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ml-10 {
		margin-left: 20rpx;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>